<template>
  <div>
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/daily' }">日报</el-breadcrumb-item>
          </el-breadcrumb>
          <br>
          <el-row>
            <el-col :span="3">
              <el-date-picker
                      size="mini"
                      type="datetime"
                      style="width: 120px"
                      v-model="search.startTime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      :picker-options="pickerOptions"
                      placeholder="开始时间">
              </el-date-picker>
            </el-col>
            <el-col :span="3">
              <el-date-picker
                      size="mini"
                      type="datetime"
                      style="width: 120px"
                      v-model="search.endTime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      :picker-options="pickerOptions"
                      placeholder="结束时间">
              </el-date-picker>
            </el-col>

            <el-col :span="6">
              <el-button size="mini" @click="findByDate" type="primary">搜索</el-button>
            </el-col>

            <el-col :span="12">
              <el-button @click="addDaily" style="float: right; padding: 3px 0" type="text">+新增员工</el-button>
            </el-col>
          </el-row>
        </div>

        <div>
          <el-table
                  v-loading="loading"
                  :data="tableData"
                  style="width: 100%">
            <el-table-column
                    sortable
                    label="账户"
                    prop="account">
            </el-table-column>
            <el-table-column
                    sortable
                    label="申请人"
                    prop="applicant">
            </el-table-column>
            <el-table-column
                    sortable
                    label="工作内容"
                    prop="work_content">
            </el-table-column>
            <el-table-column
                    sortable
                    label="工作进度"
                    prop="work_process">
              <template slot-scope="scope">
                <el-progress :percentage="scope.row.work_process"></el-progress>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
              </template>
            </el-table-column>
            <el-table-column
                    sortable
                    label="明日计划"
                    prop="tomorrow_plan">
            </el-table-column>
            <el-table-column
                    sortable
                    label="问题"
                    prop="problem">
            </el-table-column>
            <el-table-column
                    sortable
                    label="备注"
                    prop="other">
            </el-table-column>
            <el-table-column
                    sortable
                    label="创建日期"
                    prop="createTime">
            </el-table-column>
            <el-table-column
                    align="right">
              <template slot="header" slot-scope="scope">
                <el-input
                        v-model="search"
                        size="mini"
                        placeholder="输入关键字搜索"
                        @blur="searchUserInfo"/>
              </template>
              <template slot-scope="scope">
                <div v-show="scope.row.account===account">
                  <el-button
                          size="mini"
                          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                  <el-button
                          size="mini"
                          type="danger"
                          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[5, 10, 15, 20]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="page_total">
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>

  import {findByDate} from "../../network/Daily"

  import {delDaily, getAllDaily} from "../../network/Daily"
  export default {
    name: "Daily",
    data() {
      return {
        account: window.sessionStorage.getItem('account'),
        tableData: [],
        search: '',
        currentPage4: 5,
        page: {
          pageNo: 1,
          pageSize: 5
        },
        page_total: 0,
        loading: true,
        search: {
          startTime: '',
          endTime: '',
        },
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
      }
    },
    beforeMount() {
      this.getAllDaily()
    },
    methods: {
      // 获取部门信息
      getAllDaily() {
        getAllDaily(this.page).then(res => {
              console.log(res)
              this.tableData = res.data.content;
              this.page_total = res.data.content.length;
              this.page_total = res.data.totalElements
              setTimeout(() => {
                this.loading = false
              },500)
            },
            error => {
              console.log(error)
            });
      },
      // 修改部门信息
      handleEdit(index, row) {
        const data = row
        console.log('进度'+row.work_process);
        this.$store.commit('setDailyData', data)
        this.$store.state.dailyData.work_process = Number(row.work_process)
        this.$router.push("/dailyEdit")
      },
      // 修改分页的大小
      handleSizeChange(val) {
        this.page.pageSize = val
        getAllDaily(this.page).then(res => {
              this.tableData = res.data.content;
              this.page_total = res.data.content.length;
              this.page_total = res.data.totalElements
              setTimeout(() => {
                this.loading = false
              },500)
            },
            error => {
              console.log(error)
            })
      },
      // 修改当球按页数
      handleCurrentChange(val) {
        this.page.pageNo = val
        getAllDaily(this.page).then(res => {
              this.tableData = res.data.content;
              this.page_total = res.data.content.length;
              this.page_total = res.data.totalElements
              setTimeout(() => {
                this.loading = false
              },500)
            },
            error => {
              console.log(error)
            })
      },
      // 删除用户信息
      handleDelete(index, row) {
        delDaily(row.id).then(res => {
              console.log(row.id)
              this.$confirm('此操作将永久删除该日报, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                getAllDaily(this.page).then(res => {
                      this.tableData = res.data.content;
                      this.page_total = res.data.content.length;
                      this.page_total = res.data.totalElements
                      setTimeout(() => {
                        this.$message.success('删除成功')
                        this.loading = false
                      },500)
                    },
                    error => {
                      console.log(error)
                    })
              }).catch(() => {
                setTimeout(() => {
                  this.$message.success('取消删除')
                  this.loading = false
                },500)
              });
            },
            err => {
              console.log(err);
            })

      },
      // 新增日报
      addDaily() {
        this.$router.push("/dailyAdd")
      },
      findByDate() {
        console.log(this.search)
        findByDate(this.search, this.page).then(res => {
          console.log(res.data)
          this.tableData = res.data;
          console.log(this.tableData)
          this.page_total = res.data.length;
          this.page_total = res.data.totalElements
          setTimeout(() => {
            this.$message.success('搜索成功')
            this.loading = false
          },500)
        })
      }
    }
  }
</script>

<style scoped>

</style>
